<template>
    <div class="signup-page mx-auto p-3 w-330">
        <h5>注册账户</h5>
        <ValidateForm @form-submit="onFormSubmit">
            <div class="mb-3">
                <label for="form-label">邮箱地址</label>
                <ValidateInput @value="emailValue" :rules="emailRules" v-model="formData.email" placeholder="请输入邮箱地址"></ValidateInput>
            </div>
            <div class="mb-3">
                <label for="form-label">昵称</label>
                <ValidateInput @value="nameValue" :rules="nameRules" v-model="formData.nickName" placeholder="请输入昵称"></ValidateInput>
            </div>
            <div class="mb-3">
                <label for="form-label">密码</label>
                <ValidateInput @value="passwordValue" :rules="passwordRules" v-model="formData.password" placeholder="请输入密码"></ValidateInput>
            </div>
            <div class="mb-3">
                <label for="form-label">确认密码</label>
                <ValidateInput @value="repPassValue" :rules="repeatPasswordRules" v-model="formData.repeatPassword" placeholder="请再次输入密码"></ValidateInput>
            </div>
        </ValidateForm>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
import ValidateForm from '@/components/ValidateForm.vue';
import ValidateInput, { RulesProp } from "../components/ValidateInput.vue";
import { useRouter } from 'vue-router';
import axios from 'axios';
import createMessage from '@/hooks/createMessage';

export default defineComponent({
    components: {
        ValidateForm,
        ValidateInput
    },
    setup() {
        const formData = reactive({
            email: '',
            nickName: '',
            password: '',
            repeatPassword: ''
        })
        const router = useRouter()

        const emailRules: RulesProp = [
            // 这个是邮箱规则，应该被这个东西约束
            { type: "required", message: "电子邮箱不能为空" }, // 这个是必填项
            { type: "email", message: "请输入一个正确的电子邮箱格式" },
        ]
        const nameRules: RulesProp = [
            { type: "required", message: "昵称不能为空" }
        ]
        const passwordRules: RulesProp = [
            { type: "required", message: "密码不能为空" },
        ]
        const repeatPasswordRules: RulesProp = [
            { type: "required", validator: () => formData.password === formData.repeatPassword, message: "重复密码不能为空" },
            { type: "custom", validator: () => formData.password === formData.repeatPassword, message: "密码不相同" }
        ]

        const emailValue = (val: string) => {
            formData.email = val
        }

        const nameValue = (val: string) => {
            formData.nickName = val
        }

        const passwordValue = (val: string) => {
            formData.password = val
        }
        
        const repPassValue = (val: string) => {
            formData.repeatPassword = val
        }

        const onFormSubmit = (result: boolean) => {
            if(result) {
                const payload = {
                    email: formData.email,
                    nickName: formData.nickName,
                    password: formData.password
                }
                axios.post('/users', payload).then(() => {
                    createMessage('注册成功 正在跳转登录页', 'success')
                    setTimeout(() => {
                        router.push('/login')
                    }, 2000)
                })
                .catch(e => {
                    console.log(e);
                }) 
            }
        }

        return {
            formData,
            emailRules,
            nameRules,
            passwordRules,
            repeatPasswordRules,
            onFormSubmit,
            emailValue,
            nameValue,
            passwordValue,
            repPassValue
        }
    },
})
</script>

<style>
.w-330 {
    max-width: 330px;
}
</style>
